<template>
  <a-config-provider size="mini">
    <div id="ime">
      <header id="header">
        <j-header></j-header>
      </header>
      <div class="content">
        <div id="left">
          <j-directory></j-directory>
          <template v-if="store.codeTable.value">
            <j-panel v-model="store.codeTable.value.separator" :radios="SEPARATORS">分隔符（重置）</j-panel>
            <j-panel v-model="store.codeTable.value.codeSeparator" :radios="SEPARATORS">编码分隔符（重置）</j-panel>
            <j-panel v-model="store.codeTable.value.numFilter" :radios="NUMBER_FILTER">字数筛选</j-panel>
            <a-button long status="warning" type="primary" @click="store.saveAndRepair">保存并修复</a-button>
          </template>
        </div>
        <template v-if="store.codeTable.value">
          <j-table id="right"></j-table>
        </template>
        <h1 v-else>加载中...</h1>
      </div>
      <footer id="footer" class="block">
        <j-footer>
          <template v-if="store.codeTable.value">
            <span>错误分隔符：{{ store.codeTable.value.errLength }}</span><span>词条：{{ store.codeTable.value.length
            }}</span><span>选中：{{ store.codeTable.value.selectedLength }}</span>
          </template>
        </j-footer>
      </footer>
    </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
import JDirectory from '@renderer/components/J-Directory.vue';
import JFooter from '@renderer/components/J-Footer.vue';
import JHeader from '@renderer/components/J-Header.vue';
import JPanel from '@renderer/components/J-Panel.vue';
import { NUMBER_FILTER, SEPARATORS } from '@renderer/components/J-Table/CodeTable';
import JTable from '@renderer/components/J-Table/index.vue';
import { useStore } from '@renderer/Store';
import './assets/Global.scss';
import './assets/Reset.scss';

const store = useStore();

</script>

<style lang="scss" scoped>
#ime {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  height: 33px;
  padding: 5px;
}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#left {
  width: 200px;
  overflow-y: auto;
}

#right {
  flex: 1;
  overflow: hidden;
}

#footer {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
</style>